import {View, Text} from '@tarojs/components'
import Taro from '@tarojs/taro'
// import {useState} from 'react'
import LgButton from '../../../components/button'
// import {LgPopLayer} from '@/pages//components/popLayer'
// import {CalendarPicker} from 'antd-mobile'
// import dayjs from 'dayjs'
import styles from './index.module.scss'
import CustomPopup from '../customPopup'
import ClassNames from 'classnames'

export interface FilterPropsType {
  title?: string
  statusList?: string[]
  isOpen: boolean
  dataList: Array<{key: string | number; name: string}>[]
  setIsOpen: (isOpen: boolean) => void
  setStatusFns: Array<(status: string) => void>
}

function App(props: FilterPropsType) {
  const {
    title = '筛选',
    isOpen,
    statusList = [],
    setStatusFns = [],
    setIsOpen,
    dataList = []
  } = props

  const handleReset = () => {
    setIsOpen(false)
    setStatusFns.forEach((fn) => fn(''))
  }

  return (
    <CustomPopup
      title={title}
      className={styles['filter-container']}
      isOpened={isOpen}
      setIsOpened={setIsOpen}
    >
      <View className={styles.wrapper}>
        {dataList.map((d, index) => {
          return (
            <View className={styles['filter-item']}>
              <View className={styles['filter-title']}>状态</View>
              <View className={styles['filter-content']}>
                {d.map((s) => {
                  const {key, name} = s
                  const defaultOptClass = styles['filter-opt']
                  const selectedClass = styles.selected
                  const fn = setStatusFns[index]
                  const optClass = ClassNames({
                    [defaultOptClass]: true,
                    [selectedClass]: statusList[index] === key
                  })
                  return (
                    <View
                      key={key}
                      className={optClass}
                      onClick={() => {
                        typeof fn === 'function' && fn(key)
                        setIsOpen(false)
                      }}
                    >
                      {name}
                    </View>
                  )
                })}
              </View>
            </View>
          )
        })}
        <View className={styles.btn}>
          <LgButton onClick={handleReset}>重置</LgButton>
        </View>
      </View>
    </CustomPopup>
  )
}
export default App
